<template>
	<view class="chongzhi-wrap">
		<view class="chongzhi-card">
			<view class="input-box u-flex u-col-center">
				<input class="u-flex-1 u-p-l-10" type="number" v-model="mobile" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="title-money">充话费</view>
		<view class="money-list">
			<view class="money-box" @click="jine(100)">100元</view>
			<view class="money-box" @click="jine(200)">200元</view>
		</view>
		
		<view class="chongzhi-tips"></view>
		
		<block v-for="(item, index) in viewTemplate" :key="item.id">
			<!-- 富文本 -->
			<sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext>
		</block>

		<!-- modal -->
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true"
			confirm-color="#7063D2" cancel-color="#666666" @confirm="chongzhi"
			confirm-text="确认充值" cancel-text="取消充值" :content="'充值号码: '+mobile+', 充值成功后无法退款'" title="请确认充值号码">
		</u-modal>

		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
	import shRichtext from '@/pages/index/components/sh-richtext.vue';
	export default {
		components: {
			shRichtext
		},
		data() {
			return {
				mobile: '',
				money: '',
				showModal: false,
				timer: null,
				available: 1,
				viewTemplate: []
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getViewTemplate()
		},
		methods: {
			getUserInfo() {
				this.$http('user.info');
			},
			getViewTemplate() {
				let that = this;
				that.$http('common.custom', {custom_id: 22}).then(res => {
					if (res.code == 1) {
						that.viewTemplate = res.data.template;
					}
				});
			},
			jine(money) {
				let re = /^1\d{10}$/
				if (re.test(this.mobile)) {
					this.money = money
					if (!this.available) {
						uni.showToast({title:'正在充值,请勿重复操作',icon:'none'})
					} else {
						this.showModal = true
					}
				} else {
					uni.showToast({title:'请输入正确的手机号码',icon:'none'})
				}
			},
			chongzhi() {
				let that = this
				that.$http('chongzhi.chongzhi', {
					mobile: that.mobile,
					money: that.money
				}).then(res => {
					that.available = 0
					if (res.code == 1) {
						let order = res.data
						that.checkchongzhi(order)
						that.$Router.push({
							path: order.status > 0 ? `/pages/order/payment/result` : `/pages/order/payment/method`,
							query: {
								orderId: order.id,
								payState: order.status > 0 ? 'success' : 'paying'
							}
						});
					} else {
						that.available = 1
						uni.showToast({title:'充值失败'})
					}
				});
			},
			checkchongzhi(order) {
				let that = this,counter = 0
				that.timer = setInterval(function() {
					if (counter > 20) {
						clearInterval(that.timer);
					} else {
						that.$http('order.detail', {id: order.id}).then(res => {
							if (res.code === 1 && res.data.status > 0) {
								clearInterval(that.timer);
								uni.showModal({
									title: '提示',
									content: '充值成功',
									showCancel: false
								})
								that.money = ''
								that.mobile = ''
								that.available = 1
							}
						});
					}
					counter++;
				}, 10000)
			}
		}
	}
</script>

<style lang="scss">
	
	.chongzhi-wrap{padding:20rpx;}
	
	.title-money{font-size:24rpx;color:#999;padding:20rpx 10rpx;}
	
	.chongzhi-tips{
		padding:20rpx;
		.title{
			font-weight:bold;
			padding:20rpx 0;
			line-height:200%;
			font-size:28rpx;
			color:#666;
			margin-top:30rpx;
		}
		.content{
			line-height:180%;
			margin:10rpx 0;
			font-size:24rpx;
			color:#999
		}
	}
	
	
	.money-list{
		display:flex;
		justify-content: space-between;
		align-items: center;
		
		.money-box{
			padding:20rpx;
			border:1rpx solid #ccc;
			font-weight: bold;
			border-radius:10rpx;
			width:100%;
			margin:10rpx;
			text-align: center;
			font-size:28rpx;
		}
	}
	
	.chongzhi-card {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		
	
		.card-title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	
		.input-box {
			width: 624rpx;
			border-bottom: 1rpx solid #eee;
			height: 100rpx;
	
			.unit {
				font-size: 48rpx;
				color: #333;
			}
		}
	
		.bank-box {
			.name {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
	
			.bank-list {
				.empty-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
	
				.sel-box {
					.item-img {
						width: 36rpx;
						height: 36rpx;
					}
	
					.item-title {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	
		.bank-info {
			height: 50rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
	
			.bank-info-title {
				width: 500rpx;
			}
	
			.bind-btn {
				padding: 0 20rpx;
				line-height: 50rpx;
				background: #f5f6f8;
				border-radius: 20rpx;
				color: #999;
			}
		}
	
		.save-btn {
			width: 616rpx;
			height: 86rpx;
			line-height: 86rpx;
			background: linear-gradient(-90deg, #a36fff, #5336ff);
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
			border-radius: 43rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #ffffff;
		}
	}
	
	// 提现说明
	.draw-notice {
		width: 684rpx;
		height: 327rpx;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx 35rpx;
		margin: 20rpx auto;
	
		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;
		}
	
		.draw-list {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			margin-bottom: 10rpx;
		}
	}
	

</style>
